<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <link rel="stylesheet" href="./lib//bootstrap-4.3.1//dist/css/bootstrap.css"></link>
	</head>

	<body>
		<script src="./lib/vue-2.6.10/dist/vue.min.js"></script>
		<div id="app">

      <div class="panel panel-primary">
        <div class="panel-heading">
          <h3 class="panel-title">add list</h3>
        </div>
        <div class="panel-body form-inline">
          <label>
            Id:
            <input type="text" v-model="id" v-focus v-color="'red'">
          </label>
          <label>
            Name:
            <input type="text" v-model="name" >
          </label>
          <input class="btn btn-primary" type="button" value="添加"
           @keyup.f2="add">

          <label v-color>搜索名称关键字：
            <input type="text" v-model="keywords" v-color="'blue'">
          </label>
        </div>

      </div>
      <table class="table table-bordered table-hover table-striped">
        <thead>
          <tr>
            <th>Id</th>
            <th>Name</th>
            <th>Ctime</th>
            <th>Operation</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="item in search(keywords)" :key="item.id">
            <td>{{item.id}}</td>
            <td v-text="item.name"></td>
            <td>{{item.ctime | dateFormat}}</td>
            <td><a href='' @click.prevent="del(item.id)">删除</a></td>
          </tr>
        </tbody>
      </table>

      <p>{{msg | msgFormat('疯狂','123') | test}}</p>

    </div>
    <div id="app2">
      <p v-fontweight>{{1+1}}</p>
    </div>
		<script>
      Vue.config.keyCodes.f2 = 113
      Vue.directive('focus', {
        bind:function(el){},//bind还没放到dom中
        inserted: (el)=>{el.focus()},
        updated: (el)=> {} //dom 更新时执行
      })
      Vue.directive('color', {
        bind:function(el,binding){el.style.color= binding.value},//bind还没放到dom中
        inserted: (el)=>{},
        updated: (el)=> {} //dom 更新时执行
      })
      Vue.filter('msgFormat', (msg, arg, arg2) => {
        return msg.replace(/单纯/g,arg + arg2)
      })
      Vue.filter('test', (msg) => {
        return msg+ '======'
      })
      Vue.filter('dateFormat', (dataStr, pattern) => {
        var dt = new Date(dataStr)
        var y = dt.getFullYear()
        var m = dt.getMonth() + 1
        var d = dt.getDate()

        if (pattern && pattern.toLowerCase() === 'yyyy-mm-dd') {
          return `${y}-${m}-${d}`
        }else {
          var hh = dt.getHours()
          var mm = dt.getMinutes()
          var ss = dt.getSeconds()

          return `${y}-${m}-${d}:${hh}:${mm}:${ss}`
        }
      })
			var vm = new Vue({
				el: "#app",
				data: {
          id: '',
          name: '',
          keywords: '',
          list: [
            {id: 1, name: '奔驰', ctime: new Date()},
            {id: 2, name: '宝马', ctime: new Date()},
          ],
          msg: '曾经，我也是个单纯的少女，单纯的我，傻傻的问，谁是世界上最单纯的人'
				},
				methods: {
          add() {
            this.list.unshift({id: this.id, name: this.name,ctime: new Date()})
            this.id = this.name = ''
          },
          del(id) {
            // this.list.some((item, i)=> {
            //   if(item.id == id) {
            //     this.list.splice(i, 1);
            //     return true
            //   }
            // })
            var index = this.list.findIndex((item) => {
              if (item.id == id) {
                return true;
              }
            })
            this.list.splice(index, 1);
          },
          search(keywords) {
            // var newList = []
            // this.list.forEach(item => {
            //   if (item.name.indexOf(keywords) != -1 ) {
            //     newList.push(item)
            //   }
              
            // });
            // return newList;

            return this.list.filter(item=>{
              if (item.name.includes(keywords)) {
                return item
              }
            })
           
          }
				},
        filters: {
          //就近原则
          dateFormat: (dataStr,pattern) => {
            var dt = new Date(dataStr)
            var y = dt.getFullYear()
            var m = (dt.getMonth() + 1).toString().padStart(2,'0')
            var d = dt.getDate().toString().padStart(2,'0')

            if (pattern && pattern.toLowerCase() === 'yyyy-mm-dd') {
              return `${y}-${m}-${d}`
            }else {
              var hh = dt.getHours().toString().padStart(2,'0')
              var mm = dt.getMinutes().toString().padStart(2,'0')
              var ss = dt.getSeconds().toString().padStart(2,'0')

              return `${y}-${m}-${d}:${hh}:${mm}:${ss}~~~`
            }
          }
        }
			});
      //私有
      var vm2 = new Vue({
        el: '#app2',
        directives: {
          'fontweight': {
            bind: (el,binding)=> {
              el.style.fontWeight = '900'
            },
            inserted: () => {

            },
            updated: () => {

            }
          },
          //等同于把代码写到了bind 和updated中
          'fontsize': (el,binding)=> {

          }
        }
      })
		</script>
	</body>
</html>
